<template>
  <div id="leaveList" class="magin-top">
    <div id="limit">
      学生姓名：
      <el-input
        class="magin-right"
        placeholder="请输入学生姓名关键字"
        v-model="name"
        clearable
      ></el-input>
      请假时间：
      <el-date-picker
        v-model="time"
        type="datetimerange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      >
      </el-date-picker>
      <el-button type="primary" round @click="getLeaveList">查询</el-button>
      <el-button type="success" round @click="leaveDialogVisible=true">新增</el-button>
    </div>
    <div id="table" class="magin-top">
      <el-table :data="leaveList" style="width: 100%">
        <el-table-column label="请假编号" prop="id"></el-table-column>
        <el-table-column label="请假人" prop="name"></el-table-column>
        <el-table-column label="审核人" prop="askForName" width="80"></el-table-column>
        <el-table-column label="开始时间" prop="startTime">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.startTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="结束时间" prop="endTime">
          <template slot-scope="scope">
            <span v-text="parseTime(scope.row.endTime)"></span>
          </template>
        </el-table-column>
         <el-table-column label="请假理由" prop="reason"></el-table-column>
        <el-table-column label="状态" prop="status">
          <template slot-scope="scope">
            <span v-if="scope.row.status === 0">进行中</span>
            <span v-else-if="scope.row.status === 1">已完成</span>
            <span v-else-if="scope.row.status === 2">已驳回</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button v-if="false" size="mini" type="info" @click="handleEdit(scope.row)"
              >编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row.id)"
              >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div id="pagination">
      <el-row>
        <el-col :span="1" :offset="15">
          <el-pagination
            background
            :page-size="pageSize"
            :page-sizes="[5, 10, 15, 20]"
            :current-page="pageNow"
            @size-change="handlePageSizeChange"
            @current-change="handlePageCurrentChange"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </el-col>
      </el-row>
    </div>
    <div id="dialog">
      <leave-dialog :leaveDialogVisible='leaveDialogVisible' :leaveForm="leaveForm"></leave-dialog>
    </div>
  </div>
</template>

<script>
import leave from "@/api/leave/leave";
import { parseTime } from '@/utils/index' 
import leaveDialog from './leaveDialog.vue';
export default {
  components: { leaveDialog },
  name: "LeaveList",
  data() {
    return {
      //条件查询相关参数
      name: "",
      time: "",
      //分页相关参数
      pageNow: 1,
      pageSize: 5,
      total: 0,
      leaveDialogVisible:false,
      leaveForm:{},
      //table显示数据对象
      leaveList: [],
    };
  },
  created() {
    this.getLeaveList();
  },
  mounted() {},

  methods: {
    /*获取请假信息*/
    getLeaveList() {
      var leavePageParams = {
        pageNow: this.pageNow,
        pageSize: this.pageSize,
      };

      if (this.time.length > 0) {
        this.$set(leavePageParams, "startTime", this.time[0]);
        this.$set(leavePageParams, "endTime", this.time[1]);
      }
      leave
        .getLeaveList(leavePageParams)
        .then((res) => {
          this.total = res.total;
          this.leaveList = res.data;
        })
        .catch((erro) => {
          console.log(erro);
        });
    },
    /*改变页面大小*/
    handlePageSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.getLeaveList();
    },
    /*改变当前页*/
    handlePageCurrentChange(pageNow) {
      this.pageNow = pageNow;
      this.getLeaveList();
    },
    /**
     * 执行编辑操作*
     * @param row
     */
    handleEdit(row) {

    },
    /**
     * 执行删除操作
     * @param id   行对象
     */
    handleDelete(id) {
      this.$confirm("确认删除该记录？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        leave
          .delLeaveById(id)
          .then(() => {
            this.getLeaveList();
            this.$message({
              type: "success",
              message: "删除成功!",
            });
          })
          .catch(() => {
            this.$message.error("删除失败");
          });
      });
    },
    /**
     * 格式化时间
     */
    parseTime(time) {
     return parseTime(time,'')
    },
    /*关闭dialog*/
    closeDialog() {
      this.leaveDialogVisible=false
    },
  },
};
</script>

<style scoped>
.magin-right {
  margin-right: 20px;
  width: 200px;
}

.magin-top {
  margin-top: 20px;
}

#table {
  margin-left: 20px;
}
</style>